<template>
  <div class="register-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-container">
        <div class="header-title">注册小米账号</div>
        <div class="header-links">
          已有账号？<router-link to="/login">登录</router-link>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <div class="register-box">
        <form @submit.prevent class="register-form">
          <div class="form-group">
            <input
              type="text"
              placeholder="用户名"
              v-model="user.username"
              class="form-input"
            />
          </div>
          <div class="form-group password-group">
            <input
              :type="showPassword ? 'text' : 'password'"
              placeholder="密码"
              v-model="user.pwd"
              class="form-input"
            />
            <span class="toggle-password" @click="showPassword = !showPassword">
              {{ showPassword ? '👁️' : '👁️‍🗨️' }}
            </span>
          </div>
          <div class="form-group">
            <input
              type="text"
              placeholder="真实姓名"
              v-model="user.truename"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              placeholder="邮箱"
              v-model="user.cardid"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              placeholder="电话号码"
              v-model="user.phone"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <div class="upload-area">
              <input
                type="file"
                id="avatar-upload"
                @change="change"
                class="file-input"
              />
              <label for="avatar-upload" class="upload-label">
                <span v-if="!file">上传头像</span>
                <span v-else>已选择文件: {{ file.name }}</span>
              </label>
            </div>
          </div>
          <div class="agreement">
            <input type="checkbox" id="agree" v-model="agree" />
            <label for="agree">我已阅读并同意小米账号 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></label>
          </div>
          <button @click="reg" class="register-button" :disabled="!agree">立即注册</button>
        </form>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div class="footer-links">
        <a href="#">简体</a> | <a href="#">繁体</a> | <a href="#">English</a> | 
        <a href="#">常见问题</a> | <a href="#">隐私政策</a>
      </div>
      <div class="copyright">
        Copyright © 2010 - 2023 小米版权所有
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from "../api/axios";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const user = ref({
  userid: 0,
  username: "",
  pwd: "",
  truename: "",
  cardid: "",
  phone: "",
});
const file = ref();
const showPassword = ref(false);
const agree = ref(false);

const change = (event) => {
  file.value = event.target.files[0];
  console.log(file.value);
}
const reg = () => {
  // 检查用户是否同意协议
  if (!agree.value) {
    alert("您必须同意用户协议和隐私政策才能注册");
    return;
  }

  // 检查用户名是否为空
  if (!user.value.username) {
    alert("用户名不能为空");
    return;
  }
  // 检查密码是否为空
  if (!user.value.pwd) {
    alert("密码不能为空");
    return;
  }
  // 检查真实姓名是否为空
  if (!user.value.truename) {
    alert("真实姓名不能为空");
    return;
  }
  // 检查身份证号是否为空
  if (!user.value.cardid) {
    alert("邮箱不能为空");
    return;
  }
  // 检查电话号码是否为空
  if (!user.value.phone) {
    alert("电话号码不能为空");
    return;
  }
  // 检查是否上传了头像
  if (!file.value) {
    alert("请上传头像");
    return;
  }

  let formdata = new FormData();
  formdata.append('username', user.value.username);
  formdata.append('pwd', user.value.pwd);
  formdata.append('truename', user.value.truename);
  formdata.append('cardid', user.value.cardid);
  formdata.append('phone', user.value.phone);
  formdata.append('head', file.value);
  axios.post("/api/users/regist", formdata, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  }).then((res) => {
    if (res.data.code == 200) {
      alert("注册成功");
      router.push("/login");
    } else {
      alert(res.data.msg);
    }
  });
};
</script>


<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
}

/* 顶部导航栏样式 */
.header {
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.header-container {
  width: 1226px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
}

.logo img {
  height: 50px;
}

.header-title {
  font-size: 22px;
  color: #424242;
  margin-left: 30px;
  flex-grow: 1;
}

.header-links {
  font-size: 14px;
  color: #757575;
}

.header-links a {
  color: #ff6700;
  text-decoration: none;
}

.header-links a:hover {
  color: #ff6700;
}

/* 主要内容区样式 */
.main-content {
  flex: 1;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-box {
  width: 400px;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  width: 100%;
}

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #ff6700;
}

/* 上传区域样式 */
.upload-area {
  position: relative;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.upload-label {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  color: #757575;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-label:hover {
  border-color: #ff6700;
  color: #ff6700;
}

/* 协议样式 */
.agreement {
  font-size: 12px;
  color: #757575;
  margin: 10px 0;
}

.agreement input {
  margin-right: 5px;
}

.agreement a {
  color: #ff6700;
  text-decoration: none;
}

.agreement a:hover {
  text-decoration: underline;
}

/* 注册按钮样式 */
.register-button {
  width: 100%;
  height: 48px;
  background-color: #ff6700;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.register-button:hover {
  background-color: #f25807;
}

/* 页脚样式 */
.footer {
  padding: 30px 0;
  background-color: #f5f5f5;
  text-align: center;
  font-size: 12px;
  color: #757575;
}

.footer-links {
  margin-bottom: 10px;
}

.footer-links a {
  color: #757575;
  text-decoration: none;
  margin: 0 5px;
}

.footer-links a:hover {
  color: #ff6700;
}
.password-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
}

.sms-group {
  display: flex;
  gap: 10px;
}

.sms-input {
  flex: 1;
}

.sms-button {
  width: 120px;
  height: 48px;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.sms-button:hover {
  background-color: #e0e0e0;
}

.sms-button:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.register-button:disabled {
  background-color: #ff9770;
  cursor: not-allowed;
}
</style>